<script setup lang="ts" name="loginList">
import useLoginLost from '@/components/login/hooks/loginList'
const { accounts, submitData, deleteAccount } = useLoginLost()
</script>

<template>
  <ul>
    <!-- v-for 渲染数据 -->
    <li v-for="item in accounts" :key="item.id" class="selector">
      <img :src="item.img" alt="" />
      <b @click="submitData(item)">{{ item.user }}</b>
      <button @click="deleteAccount(item.id)">
        <Delete class="svg" />
      </button>
    </li>
  </ul>
</template>

<style scoped lang="less">
* {
  color: var(--color3);
}
.svg {
  width: 24px;
  height: 24px;
}
ul {
  overflow-y: scroll;
  scrollbar-width: none;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 70px;
  grid-gap: 10px 0;
  margin-top: 50px;
  > li:hover {
    cursor: pointer;
    background-color: var(--color1);
    > b {
      color: var(--color3);
    }
    > button {
      cursor: pointer;
      background-color: var(--color1);
    }
  }
  > li {
    display: flex;
    flex-wrap: nowrap;
    height: 70px;
    border: 2px solid var(--color1);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    > img {
      height: 70px;
      width: 70px;
      object-fit: cover;
      flex: none;
    }
    > b {
      width: 226px;
      height: 70px;
      font-size: 20px;
      font-weight: normal;
      line-height: 70px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 16px;
    }
    > button {
      background-color: var(--color2);
      width: 50px;
      height: 70px;
      border: none;
    }
  }
}
</style>
